<script>

</script>
<div id="dialog-form" title="Time Line">
  <form>
  <fieldset>
  <label>Note</label>
  <input type="text" name="note" id="note" class="text ui-widget-content ui-corner-all" />
  <label>Position</label>
  <?=$this->form_eksternal->form_dropdown('pos', array(0 => "Tagret", 1 => "Actual"), array(), 'class="text ui-widget-content ui-corner-all" id="pos"')?>
  <?=$this->form_eksternal->form_input('id_fase', "", 'id="id_fase" style="display: none"')?>
  <?=$this->form_eksternal->form_input('id_dev_check', 0, 'id="id_dev_check" style="display: none"')?>
  <label>Start Date</label>
  <?=$this->form_eksternal->form_date("start_date", "", "start_date", 'class="text ui-widget-content ui-corner-all"')?>
  <label>End Date</label>
  <?=$this->form_eksternal->form_date("end_date", "", "end_date", 'class="text ui-widget-content ui-corner-all"')?>
  </fieldset>
  </form>
</div>
<div class="contain">
  <table>
    <tr>
      <td colspan="3" style="font-size: 14px"><b>TIME LINE REPORT</b></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Nama Outlet</td>
      <td>: </td>
      <td><b>Mr. MONTIR <?=$detail[0]->name?></b></td>
    </tr>
    <tr>
      <td>Nama Owner</td>
      <td>: </td>
      <td><?= $owner[0]->name ?></td>
    </tr>
    <tr>
      <td>Lokasi</td>
      <td>: </td>
      <td><?= nl2br($detail[0]->alamat) ?></td>
    </tr>
    <tr>
      <td>Telphone</td>
      <td>: </td>
      <td><?= $detail[0]->telp ?></td>
    </tr>
    <tr>
      <td colspan="3">
        <?php
        if($edit !== FALSE){
        ?>
        <a href="<?=site_url("dev-checklist/report/".$dev[0]->id_outlet."/".$dev[0]->id_outlet_dev)?>">Edit</a>
        |
        <?php }?>
        <a href="<?=site_url("dev-checklist/daftar-outlet")?>">Back</a>
      </td>
    </tr>
  </table>
  <div class="gantt"></div>
</div>
</body>
<script>

$(function() {

  //"use strict";
  
  $(".gantt").popover({
    selector: ".bar",
    title: "I'm a popover",
    content: "And I'm the content of said popover.",
    trigger: "hover"
  });

  //prettyPrint();

});

$(document).ready(function() {
  $( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 350,
    width: 450,
    modal: true,
    buttons: {
    "Save": function() {
      <?php
      if($edit !== FALSE){
      ?>
      $.post("<?=site_url("dev-checklist/reportpost")?>",{note:$("#note").val(), sifat:$("#pos").val(), time_start:$("#start_date").val(), time_end:$("#end_date").val(), section_id:$("#id_fase").val(), id_outlet_dev:<?=$dev[0]->id_outlet_dev?>, id_dev_check: $("#id_dev_check").val()},function(data){
//          console.log('sa');
//          console.log(data);
//          console.log('sa');
      });
      <?php }?>
      coba();
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
    },
    close: function() {
      $("#note").val("");
      $("#pos").val("");
      $("#id_fase").val("");
      $("#start_date").val("");
      $("#end_date").val("");
      $("#id_dev_check").val(0);
    }
  });
  function coba(){
    var tanggal_mulai = new Date("<?=$dev[0]->start_tanggal?>");
//    console.log(tanggal_mulai.getTime());
    var tanggal_akhir = <?=$dev[0]->max_date?> * 86400000 + (tanggal_mulai.getTime() * 1);
    var hk = $.ajax({
      type: 'POST',
      url: "<?=site_url("dev-checklist/get-data-fase")?>",
      async:false,
      data: { dev_start: tanggal_mulai.getTime(), dev_end: tanggal_akhir, id_outlet_dev: <?=$dev[0]->id_outlet_dev?> }
    }).done(function( msg ) {
//            console.log(msg);
      return true;
    }).responseText;
    var array_fase = $.parseJSON(hk);
    console.log(array_fase);
  $(".gantt").gantt({
    source: array_fase,
    navigate: "scroll",
    maxScale: "hours",
    itemsPerPage: 100,
    onItemClick: function(data) {
      var dev_check = $.ajax({
        type: 'POST',
        url: "<?=site_url("dev-checklist/get-data-dev-check-detail")?>",
        async:false,
        data: { id: data }
      }).done(function( msg ) {
        return true;
      }).responseText;
      var array_dev_check = $.parseJSON(dev_check);
      console.log(array_dev_check);
      
      $("#id_fase").val(array_dev_check['id_dev_step']);
      $("#start_date").val(array_dev_check['time_start']);
      $("#end_date").val(array_dev_check['time_end']);
      $("#pos").val(array_dev_check['sifat']);
      $("#note").val(array_dev_check['note']);
      $("#id_dev_check").val(array_dev_check['id_dev_check']);
      
      $( "#dialog-form" ).dialog( "open" );
    },
    onAddClick: function(dt, rowId) {
      console.log(rowId);
      <?php
      if($edit !== FALSE){
      ?>
      var tg = (dt * 1);
      var tanggal = new Date(tg);
      var row_id = rowId.toString();
      $("#id_fase").val(row_id.substr(0,row_id.length - 1));
      $("#start_date").val(tanggal.getFullYear()+"-"+(tanggal.getMonth()*1 + 1)+"-"+tanggal.getDate());
      $("#end_date").val(tanggal.getFullYear()+"-"+(tanggal.getMonth()*1 + 1)+"-"+tanggal.getDate());
      $("#pos").val(row_id.substr(row_id.length - 1,1));
      $( "#dialog-form" ).dialog( "open" );
      <?php
      }
      ?>
    },
    onRender: function() {
      if (window.console && typeof console.log === "function") {
        console.log("chart rendered");
      }
    }
  });
  }
  coba();
});

</script>